<template>
    <div class="msg">
        <el-popover placement="bottom" :width="$isMobile() ? 350 : 400" trigger="click">
            <template #reference>
                <el-badge :value="count.sum" :show-zero="false">
                    <el-icon :size="28" color="#fff" @click="getData">
                        <BellFilled />
                    </el-icon>
                </el-badge>
            </template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane name="0" v-loading="loading" element-loading-text="数据加载中...">
                    <template #label>
                        <span>系统通知({{ count.sysMessageCount }})</span>
                    </template>
                    <el-empty description="暂无消息" v-if="msgData.length === 0" />
                    <div v-else>
                        <el-collapse style="margin-bottom: 10px;">
                            <el-collapse-item v-for="(item, index) in msgData" :key="item.id" :name="index"
                                @click="change(item)">
                                <template #title>
                                    <div class="theme">
                                        <el-tag type="warning" v-if="item.msgStatus === '0'">未读</el-tag>
                                        <el-tag type="success" v-else-if="item.msgStatus === '1'">已读</el-tag>
                                        <span class="title">{{ item.theme }}</span>
                                    </div>
                                </template>
                                <div class="msgContent">
                                    {{ item.content }}
                                    <div class="time">
                                        {{ '消息时间：' + item.createTime }}
                                    </div>
                                    <div v-if="item.routePath" class="handle"
                                        @click="handleTodo(item.routePath, item.routeParam)">
                                        去查看
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                        <el-config-provider>
                            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                                :page-sizes="[10, 20, 30, 40]" :pager-count="5" :layout="'total,prev,pager,next'"
                                :total="page.total" @current-change="handleCurrentChange" />
                        </el-config-provider>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="1" v-loading="loading" element-loading-text="数据加载中...">
                    <template #label>
                        <span>消息({{ count.messageCount }})</span>
                    </template>
                    <el-empty description="暂无消息" v-if="msgData.length === 0" />
                    <div v-else> <el-collapse style="margin-bottom: 10px;">
                            <el-collapse-item v-for="(item, index) in msgData" :key="item.id" :name="index"
                                @click="change(item)">
                                <template #title>
                                    <div class="theme">
                                        <el-tag type="warning" v-if="item.msgStatus === '0'">未读</el-tag>
                                        <el-tag type="success" v-else-if="item.msgStatus === '1'">已读</el-tag>
                                        <span class="title">{{ item.theme }}</span>
                                    </div>
                                </template>
                                <div class="msgContent">
                                    {{ item.content }}
                                    <div class="time">
                                        {{ '消息时间：' + item.createTime }}
                                    </div>
                                    <div v-if="item.routePath" class="handle"
                                        @click="handleTodo(item.routePath, item.routeParam)">
                                        去查看
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                        <el-config-provider>
                            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                                :page-sizes="[10, 20, 30, 40]" :pager-count="5" :layout="'total,prev,pager,next'"
                                :total="page.total" @current-change="handleCurrentChange" />
                        </el-config-provider>
                    </div>
                </el-tab-pane>
                <el-tab-pane name="2" v-loading="loading" element-loading-text="数据加载中...">
                    <template #label>
                        <span>待办({{ count.todoCount }})</span>
                    </template>
                    <el-empty description="暂无消息" v-if="msgData.length === 0" />
                    <div v-else> <el-collapse style="margin-bottom: 10px;">
                            <el-collapse-item v-for="(item, index) in msgData" :key="item.id" :name="index"
                                @click="change(item)">
                                <template #title>
                                    <div class="theme">
                                        <el-tag type="warning" v-if="item.msgStatus === '0'">未读</el-tag>
                                        <el-tag type="success" v-else-if="item.msgStatus === '1'">已读</el-tag>
                                        <span class="title">{{ item.theme }}</span>
                                    </div>
                                </template>
                                <div class="msgContent">
                                    {{ item.content }}
                                    <div class="time">
                                        {{ '消息时间：' + item.createTime }}
                                    </div>
                                    <div v-if="item.routePath" class="handle"
                                        @click="handleTodo(item.routePath, item.routeParam)">
                                        去查看
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                        <el-config-provider>
                            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                                :page-sizes="[10, 20, 30, 40]" :pager-count="5" :layout="'total,prev,pager,next'"
                                :total="page.total" @current-change="handleCurrentChange" />
                        </el-config-provider>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-popover>
    </div>
</template>
<script setup name="msgIcon">
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import api from "@/api"
import { ElMessage } from 'element-plus'


const router = useRouter();
const loading = ref(false)
const count = ref({})
const activeName = ref('0')
const page = ref({ pageSize: 10, pageNum: 1, currentPage: 0, total: 0 })
const msgData = ref([])

const handleCurrentChange = (val) => {
    page.value.pageNum = val
    getData()
}
const getMsgCount = async () => {
    const res = await api.post('/system/message/unReadCount')
    if (res.data.code === 200) {
        count.value = res.data.data
    } else {
        ElMessage.error(res.data.msg)
    }
}
const handleClick = async (tab) => {
    activeName.value = tab.props.name
    page.value = { pageSize: 10, pageNum: 1, currentPage: 0, total: 0 }
    getData()
}

const change = async (msg) => {
    if (msg.msgStatus === '1') {
        return
    }
    const res = await api.post('/system/message/read', [msg.id])
    if (res.data.code === 200) {
        msg.msgStatus = '1'
    } else {
        ElMessage.error(res.data.msg)
    }

}
const getData = async () => {
    loading.value = true
    const params = { pageNum: page.value.pageNum, pageSize: page.value.pageSize, msgType: activeName.value }
    const res = await api.get('/system/message/pageList', params)
    if (res.data.code === 200) {
        msgData.value = res.data.data.records
        page.value.currentPage = res.data.data.current
        page.value.total = res.data.data.total
        loading.value = false
    } else {
        ElMessage.error(res.data.msg)
    }
}
const handleTodo = (routePath, routeParam) => {
    if (!routePath) {
        return
    }
    const params = { path: routePath }
    if (routeParam) {
        params.query = JSON.parse(routeParam)
    }
    router.push(params)
}
onMounted(() => {
    getMsgCount()
})
</script>
<style lang='less' scoped>
:deep(.el-collapse-item__header) {
    line-height: 20px;
    height: auto;
    padding: 10px 0;
}

.theme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    .title {
        color: var(--table-title-font-color);
        font-size: 12px;
    }
}

.msgContent {
    color: var(--table-title-font-color);
    font-size: 12px;

    .time {
        margin-top: 10px;
    }

    .handle {
        width: 100%;
        text-align: right;
        color: #409EFF;
        cursor: pointer;
    }
}
</style>